<template>
    <div class="div">
        <navbar/>
        <carousel :options="options" style="height: 800px">
            <carousel-item v-for="item in banner" :key="item.id">
                <div v-bind:style="{backgroundImage: 'url(' + item.image +')'}" class="banner"
                     v-html="item.html"></div>
            </carousel-item>
        </carousel>
        <document-title title="Index"/>
    </div>
</template>

<script>
	import Navbar from './layout/Index/Navbar';
	import Carousel from 'vue-fiu-ui/src/main/js/components/swiper/Carousel';
	import CarouselItem from 'vue-fiu-ui/src/main/js/components/swiper/CarouselItem';
	import DocumentTitle from 'vue-fiu-ui/src/main/js/components/widget/DocumentTitle';

	export default {
		components: {
			DocumentTitle,
			CarouselItem,
			Carousel,
			Navbar
		},
		name: 'index',
		data () {
			return {
				options: {
					pagination: '.swiper-pagination',
					nextButton: '.swiper-button-next',
					prevButton: '.swiper-button-prev',
					slidesPerView: 'auto',
					paginationClickable: true,
					spaceBetween: 10,
					autoplay: 6000,
					autoplayDisableOnInteraction: false
				},
				banner: [
					{
						image: require('../assets/images/showcase-1.jpg'),
						html: '<div class="slider-text">\n' +
						'                            <div class="inner">\n' +
						'                                <div class="container text-center">\n' +
						'                                    <div class="row">\n' +
						'                                        <div class="col-md-8 col-md-offset-2">\n' +
						'                                            <h1>Welcome to narani</h1>\n' +
						'                                            <p>Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Lorem ipsum dolor sit amet, consectetur.</p>\n' +
						'                                            <a href="#" class="btn btn-lg border-white">Learn More</a>\n' +
						'                                        </div>\n' +
						'                                    </div>\n' +
						'                                </div>\n' +
						'                            </div>\n' +
						'                        </div>'
					},
					{
						image: require('../assets/images/showcase-2.jpg'),
						html: '<div class="slider-text">\n' +
						'                            <div class="inner">\n' +
						'                                <div class="container text-center">\n' +
						'                                    <div class="row">\n' +
						'                                        <div class="col-md-8 col-md-offset-2">\n' +
						'                                            <h1>Welcome to narani</h1>\n' +
						'                                            <p>Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Lorem ipsum dolor sit amet, consectetur.</p>\n' +
						'                                            <a href="#" class="btn btn-lg border-white">Learn More</a>\n' +
						'                                        </div>\n' +
						'                                    </div>\n' +
						'                                </div>\n' +
						'                            </div>\n' +
						'                        </div>'
					},
					{
						image: require('../assets/images/showcase-3.jpg'),
						html: '<div class="slider-text">\n' +
						'                            <div class="inner">\n' +
						'                                <div class="container text-center">\n' +
						'                                    <div class="row">\n' +
						'                                        <div class="col-md-8 col-md-offset-2">\n' +
						'                                            <h1>Welcome to narani</h1>\n' +
						'                                            <p>Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Lorem ipsum dolor sit amet, consectetur.</p>\n' +
						'                                            <a href="#" class="btn btn-lg border-white">Learn More</a>\n' +
						'                                        </div>\n' +
						'                                    </div>\n' +
						'                                </div>\n' +
						'                            </div>\n' +
						'                        </div>'
					}
				]
			};
		}
	};
</script>

<style lang="scss">
    .banner {
        width: 100%;
        height: 800px;
    }

    .slider-text {
        width: 100%;
        display: table;
        position: relative;
        height: 100%;
        .inner {
            width: 100%;
            display: table-cell;
            vertical-align: middle;
            position: relative;
            height: 100%;
            h1, a, p {
                color: #fff;
            }
        }
    }
</style>
